<!-- @format -->

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}

			ul {
				list-style: none;
			}

			.mi {
				position: relative;
				width: 223px;
				margin: 100px auto;
			}

			.mi input {
				width: 223px;
				height: 48px;
				padding: 0 10px;
				font-size: 14px;
				line-height: 48px;
				border: 1px solid #e0e0e0;
				outline: none;
			}

			.mi .search {
				border: 1px solid #ff6700;
			}

			.result-list {
				display: none;
				position: absolute;
				left: 0;
				top: 48px;
				width: 223px;
				border: 1px solid #ff6700;
				border-top: 0;
				background: #fff;
			}

			.result-list a {
				display: block;
				padding: 6px 15px;
				font-size: 12px;
				color: #424242;
				text-decoration: none;
			}

			.result-list a:hover {
				background-color: #eee;
			}
		</style>
	</head>

	<body>
		<div class="mi">
			<input type="search" placeholder="小米笔记本" />
			<ul class="result-list">
				<li><a href="#">全部商品</a></li>
				<li><a href="#">小米11</a></li>
				<li><a href="#">小米10S</a></li>
				<li><a href="#">小米笔记本</a></li>
				<li><a href="#">小米手机</a></li>
				<li><a href="#">黑鲨4</a></li>
				<li><a href="#">空调</a></li>
			</ul>
		</div>
		<script>
			// 1. 获取元素
			const input = document.querySelector("input");
			const ul = document.querySelector("ul");

			// 2. 监听事件 获得焦点，让Ul显示出来
			input.addEventListener("focusin", function () {
				ul.style.display = "block";
			});

			// 3. 监听事件 失去焦点，让ul隐藏起来
			input.addEventListener("focusout", function () {
				ul.style.display = "none";
			});
		</script>
	</body>
</html>
